<template>
  <div class="page-header">
    <span class="page-header-title"> 角色管理 </span>
    <div class="page-header-container">页面数据为 Mock 实例数据，非真实数据。</div>
  </div>

  <ProTable
    class="page-table"
    ref="tableRef"
    row-key="name"
    :request="requestApi"
    :columns="columns"
    @selectedChange="selectedChange"
  >
    <template #toolbarHeader>
      <el-button type="primary" @click="onAdd()" plain>添加角色</el-button>
      <el-button v-if="multipleSelection.length" type="danger" plain @click="onDelete()">
        批量删除
      </el-button>
    </template>

    <!-- 表格列 -->
    <template #isDefault="scope">
      <el-tag :type="scope.row.isDefault ? 'success' : 'danger'">
        {{ scope.row.isDefault ? '是' : '否' }}
      </el-tag>
    </template>

    <template #operations="scope">
      <el-button type="primary" link @click="onAssignPermissionStateByRow(scope.row)">
        菜单权限
      </el-button>
      <el-divider direction="vertical" />
      <el-button type="primary" link @click="onEditByRow(scope.row)"> 编辑 </el-button>
      <el-divider direction="vertical" />
      <el-button type="danger" link @click="onDeleteByRow(scope.row)"> 删除 </el-button>
    </template>
  </ProTable>

  <AddRole v-model="addDialog" />
  <EditRole v-model="editState.dialog" :current="editState.current" />
  <AssignPermission
    v-model="assignPermissionState.dialog"
    :current="assignPermissionState.current"
  />
</template>

<script setup>
import { h, reactive, ref } from 'vue'
import AddRole from './components/add-role.vue'
import EditRole from './components/edit-role.vue'
import AssignPermission from './components/assign-permission.vue'
import { getRoleList } from '@/api/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ProTable } from '@/components/table/index.js'

defineOptions({
  name: 'Role', //不命名组件，keep-alive的include不属性生效
})

const columns = ref([
  { type: 'selection', width: 55 },
  { prop: 'name', label: '角色名称', 'min-width': 130 },
  { prop: 'explain', label: '说明', 'min-width': 130 },
  { prop: 'createDate', label: '创建时间', 'min-width': 170 },
  { prop: 'updateDate', label: '更新时间', 'min-width': 170 },
  {
    slotName: 'isDefault',
    prop: 'isDefault',
    label: '是否为默认角色',
    'min-width': 130,
    align: 'center',
  },
  {
    slotName: 'operations',
    prop: 'operations',
    label: '操作',
    fixed: 'right',
    width: 190,
  },
])
const tableRef = ref()
const addDialog = ref(false)
const editState = reactive({ dialog: false, current: null })
const assignPermissionState = reactive({ dialog: false, current: null })
const multipleSelection = ref([])

const requestApi = async (params) => {
  try {
    const {
      data: { list, total },
      msg,
    } = await getRoleList(params)
    return Promise.resolve({
      data: list,
      total,
      msg,
      success: true,
    })
  } catch (err) {
    ElMessage.error('数据请求失败!')
    throw new Error(`数据请求失败: ${err.message || err}`)
  }
}

// 表格选择更改
const selectedChange = (selection) => {
  multipleSelection.value = selection
}

const onAdd = () => {
  addDialog.value = true
}
const onDelete = () => {
  if (!multipleSelection.value.length) {
    return
  }
  const names = multipleSelection.value
    .map((item) => {
      return item.name
    })
    .join('，')
  ElMessageBox({
    title: '删除确定',
    message: h('p', null, [
      '您确定要删除角色 ',
      h('span', { style: 'font-weight: bold' }, names),
      ' 吗？',
    ]),
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    ElMessage({
      type: 'error',
      message: '抱歉，您没有该权限',
    })
  })
}

const onDeleteByRow = ({ name }) => {
  ElMessageBox({
    title: '删除确定',
    message: h('p', null, [
      '您确定要删除角色 ',
      h('span', { style: 'font-weight: bold' }, name),
      ' ？',
    ]),
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    ElMessage({
      type: 'error',
      message: '抱歉，您没有该权限',
    })
  })
}
const onEditByRow = (row) => {
  editState.current = row
  editState.dialog = true
}
const onAssignPermissionStateByRow = (row) => {
  assignPermissionState.current = row
  assignPermissionState.dialog = true
}
</script>

<style scoped lang="scss"></style>
